<!--车辆管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆维修</span>
    <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">录入维修车辆</el-button>
  </div>
<!--录入维修车辆窗口-->
<el-dialog :title="dialogTitle" v-model="dialogVisible"
           style="width:1000px;padding:40px;" :before-close="handleClose">
  <el-form label-width="80px" label-position="top">
    <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="送修人">
          <el-input placeholder="mike"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="维修车辆">
         <el-select placeholder="请选择车牌号">
          <el-option label="京A22323"></el-option>
          <el-option label="京B22323"></el-option>
          <el-option label="京C22323"></el-option>
         </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="维修项目">
          <el-select placeholder="请选择">
            <el-option label="汽车保养"></el-option>
            <el-option label="汽车美容"></el-option>
            <el-option label="钣金喷漆"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="维修地点">
          <el-select placeholder="请选择">
            <el-option label="沃尔沃专修店"></el-option>
            <el-option label="美奥行汽修"></el-option>
            <el-option label="悦心金峰盛车检汽修"></el-option>
            <el-option label="京昌鑫顺汽修"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="维修材料">
          <el-select placeholder="请选择">
            <el-option label="汽缸垫进排气歧管垫"></el-option>
            <el-option label="发动机前后悬挂胶垫"></el-option>
            <el-option label="板簧胶套"></el-option>
            <el-option label="消声器"></el-option>
            <el-option label="气门弹簧"></el-option>
            <el-option label="气门"></el-option>
            <el-option label="止推垫"></el-option>
            <el-option label="大小瓦"></el-option>
            <el-option label="四配套（缸套、活塞、活塞环、活塞销）"></el-option>
            <el-option label="轴承"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="维修费用">
          <el-select placeholder="请选择">
            <el-option label="1368.98"></el-option>
            <el-option label="10034.45"></el-option>
            <el-option label="613.27"></el-option>
            <el-option label="2653.5"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="维修时间">
          <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="维修状态">
          <el-radio-group>
            <el-radio  label="维修中" value="1" style="margin-right:15px;"></el-radio>
            <el-radio  label="已完成" value="0"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <el-button>取消</el-button>
    <el-button type="primary">确定</el-button>
  </template>
</el-dialog>
<!--搜索卡牌-->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="维修车辆">
        <el-input placeholder="请输入车牌号" style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item label="送修人员">
        <el-input placeholder="请输入送修人姓名" style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item label="维修状态" style="width: 290px;">
        <el-select placeholder="请选择维修状态">
          <el-option label="维修中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button>重置</el-button>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
<!--维修车辆列表 -->
  <el-card style="margin:20px;">
    <el-table :data="vehicleArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="vehicleId" label="维修车辆" align="center"/>
      <el-table-column prop="item" label="维修项目" align="center"/>
      <el-table-column prop="username" label="送修人姓名" align="center"/>
      <el-table-column prop="addr" label="维修地点" align="center"/>
      <el-table-column prop="repairTime" label="维修时间" align="center"/>
      <el-table-column prop="fee" label="维修费用" align="center"/>
      <el-table-column prop="material" label="维修材料" align="center"/>
      <el-table-column prop="status" label="维修状态" align="center"/>
      <el-table-column label="操作" align="center">
        <template>
          <el-button link type="primary" size="small">编辑</el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {ref} from "vue";

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('录入维修车辆');
</script>